<template>
  <a-input
    class="default-input"
    :style="style"
    v-model="value"
    :class="size == 'small' ? 'small-input' : ''"
    :placeholder="placeholder"
    :allowClear="allowClear"
    :disabled="disabled"
    :addonBefore="addonBeforeText"
    :maxLength="maxLength"
    @change="inputChange"
    @pressEnter="handleEnter"
    @blur="inputBlur"
  >
    <a-icon v-if="addonAfterIcon" slot="addonAfter" :type="addonAfterIcon" />
    <template v-if="addonAfterText" slot="addonAfter">{{ addonAfterText }}</template>
  </a-input>
</template>

<script>
export default {
  components: {},
  props: {
    value: {
      type: String,
      default: '',
    },
    placeholder: {
      type: String,
      default: '请输入内容',
    },
    size: {
      type: String,
      default: 'default', // default: 468px  small: 200px
    },
    style: {
      type: String,
      default: '',
    },
    allowClear: {
      type: Boolean,
      default: false,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    addonAfterIcon: {
      type: String,
      default: '',
    },
    addonAfterText: {
      type: String,
      default: '',
    },
    addonBeforeText: {
      type: String,
      default: '',
    },
    maxLength: {
      type: String,
      default: '',
    },
  },
  data() {
    return {}
  },
  created() {},
  computed: {},
  mounted() {},
  methods: {
    // 输入监听
    inputChange(e) {
      this.$emit('input', e.target.value)
    },
    // 点击enter
    handleEnter(e) {
      console.log(e.target.value)
      this.$emit('pressEnter', e.target.value)
    },
    // 失去焦点回调
    inputBlur(e) {
      console.log(e.target.value)
      this.$emit('blur', e.target.value)
    },
  },
}
</script>
<style lang="less" scoped>
.default-input {
  width: 468px;
}
.small-input {
  width: 200px;
}
</style>
